<template>
  <div class="footer">
    <div class="footer-main flex-between">
      <div class="footer-main-left">
        <div class="footer-main-left-logo flex flex-align-items-center">
          <img src="@/assets/logo-light.png">
        </div>
        <div class="footer-main-left-txt font-14">
          Fatohot海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。
        </div>
      </div>
      <div class="footer-main-right flex">
        <!-- <div class="footer-main-right-item">
          <p class="footer-main-right-item-key font-14">关注我们</p>
          <div class="flex">
            <el-popover v-for="(item, index) in followList" :key="index" placement="top" :width="100" trigger="hover">
              <template #reference>
                <div class="footer-main-right-item-icon pointer">
                  <p class="flex-center flex-align-items-center">
                    <i class="iconfont" :class="item.iconClass"></i>
                  </p>
                </div>
              </template>
              <div class="qr-popup pointer">
                <img :src="item.img">
                <p class="font-10">扫码关注</p>
              </div>
            </el-popover>
          </div>
        </div> -->
        <div class="footer-main-right-item">
          <p class="footer-main-right-item-key font-14">联系我们</p>
          <div class="footer-main-right-item-txt font-16 pointer">Fatohot官方客服</div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p class="font-12">©2017-2023版权所有 杭州峤嘉文化传媒有限公司</p>
      <p class="font-12">浙ICP备18016286号</p>
    </div>
  </div>
</template>

<script setup>
const followList = [
  {
    iconClass: 'icon-weixin',
    img: require('../assets/qr-wechat.jpg')
  },
  {
    iconClass: 'icon-douyin',
    img: require('../assets/qr-wechat.jpg')
  },
  {
    iconClass: 'icon-weixin',
    img: require('../assets/qr-wechat.jpg')
  }
];
</script>

<style lang="less" scoped>
.footer {
  position: relative;
  height: 300px;
  padding: 40px 60px 0;
  background: #12172c;

  .footer-main {
    .footer-main-left {
      .footer-main-left-logo {
        margin-bottom: 16px;

        img {
          height: 24px;
          width: auto;
        }
      }

      .footer-main-left-txt {
        width: 546px;
        line-height: 20px;
        color: #fff;
      }
    }

    .footer-main-right {
      .footer-main-right-item {
        margin-left: 60px;

        .footer-main-right-item-key {
          color: #fff;
          margin-bottom: 16px;
        }

        .footer-main-right-item-icon,
        .footer-main-right-item-txt {
          height: 60px;
          border-radius: 8px;
          background: hsla(0, 0%, 85%, .1);

          &:hover {
            background: hsla(0, 0%, 85%, .3);
          }

          &.footer-main-right-item-icon {
            margin-left: 8px;
            padding: 14px;
          }

          &.footer-main-right-item-txt {
            color: #fff;
            line-height: 60px;
            padding: 0 14px;
          }

          p {
            width: 32px;
            height: 32px;
            border-radius: 16px;
            background: #fff;

            i {
              font-size: 20px;
              color: #12172c;
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 100%;

    p {
      text-align: center;
      color: #999;
    }
  }
}

.qr-popup {
  width: 100px;
  padding: 8px 0 10px;
  text-align: center;

  img {
    width: 70px;
    height: 70px;
    margin-bottom: 4px;
  }

  p {
    color: #333;
  }
}
</style>
